<template>
	<!-- title部分 -->
	<view class="titlebox">
		<view class="titlebox-messagebox">
			<image class="titlebox-messagebox-prompt" src="../../static/消息.png"></image>
			<image class="titlebox-messagebox-set" src="../../static/设置.png" @click="goToSet"></image>
		</view>
	</view>

	<!-- Personal部分 -->
	<view class="personalbox">
		<image class="personalbox-profileimg" src="../../static/头像.png"></image>
		<view class="personalbox-informationbox">
			<view class="personalbox-informationbox-nametext">hi,爱喝咖啡的银豆</view>
			<view class="personalbox-informationbox-idtext">ID:42214117411</view>
		</view>
	</view>

	<!-- income部分 -->
	<view class="incomebox">
		<image class="incomebox-bg" src="../../static/我的背景.png"></image>
		<view class="incomebox-firstbox">
			<view class="incomebox-firstbox-leftmoneybox">
				<view class="incomebox-firstbox-leftmoneybox-test">佣金金额</view>
				<view class="incomebox-firstbox-leftmoneybox-digittest">24.56</view>
			</view>
			<view class="incomebox-firstbox-rightbox">
				<view class="incomebox-firstbox-rightbox-text" @click="goToWithdrawal">申请提现</view>
			</view>
		</view>

		<view class="incomebox-secondbox">
			<view class="incomebox-secondbox-textbox">
				<view class="incomebox-firstbox-leftmoneybox-test">今日预估</view>
				<view class="incomebox-secondbox-textbox-digittest">0.00</view>
			</view>

			<view class="incomebox-secondbox-textbox">
				<view class="incomebox-firstbox-leftmoneybox-test">昨日预估</view>
				<view class="incomebox-secondbox-textbox-digittest">0.00</view>
			</view>

			<view class="incomebox-secondbox-textbox">
				<view class="incomebox-firstbox-leftmoneybox-test">本周预估</view>
				<view class="incomebox-secondbox-textbox-digittest">0.00</view>
			</view>

			<view class="incomebox-secondbox-textbox">
				<view class="incomebox-firstbox-leftmoneybox-test">本月预估</view>
				<view class="incomebox-secondbox-textbox-digittest">0.00</view>
			</view>
		</view>
	</view>
	<!-- tool部分 -->
	<view class="toolbox">

		<view class="toolbox-text">常用功能</view>
		<view class="toolbox-centerbox">
			<view class="toolbox-contentbox">
				<image class="toolbox-contentbox-label" src="../../static/分享.png"></image>
				<text class="toolbox-contentbox-text">邀请好友</text>
			</view>

			<view class="toolbox-contentbox">
				<image class="toolbox-contentbox-label" src="../../static/订单.png" @click="goToOrder"></image>
				<text class="toolbox-contentbox-text">我的订单</text>
			</view>

			<view class="toolbox-contentbox">
				<image class="toolbox-contentbox-label" src="../../static/团队.png" @click="goToMyteam"></image>
				<text class="toolbox-contentbox-text">我的团队</text>
			</view>

			<view class="toolbox-contentbox">
				<image class="toolbox-contentbox-label" src="../../static/报表.png" @click="goToIncome"></image>
				<text class="toolbox-contentbox-text">收益报表</text>
			</view>
		</view>
	</view>



	<!-- tool部分 -->
	<view class="toolbox">

		<view class="toolbox-text">关于更多</view>
		<view class="toolbox-centerbox">
			<view class="toolbox-contentbox">
				<image class="toolbox-contentbox-label" src="../../static/云上传.png" @click="goToBill"></image>
				<text class="toolbox-contentbox-text">云发单</text>
			</view>

			<view class="toolbox-contentbox">
				<image class="toolbox-contentbox-label" src="../../static/单循环.png" @click="goToTool"></image>
				<text class="toolbox-contentbox-text">转链神器</text>
			</view>

			<view class="toolbox-contentbox">
				<image class="toolbox-contentbox-label" src="../../static/商店.png" @click="showAlert"></image>
				<text class="toolbox-contentbox-text">商家合作</text>
			</view>

			<view class="toolbox-contentbox">
				<image class="toolbox-contentbox-label" src="../../static/客服.png"></image>
				<text class="toolbox-contentbox-text">在线客服</text>
			</view>
		</view>
	</view>
	<!-- 这里是弹窗部分 -->
	<view class="alert" v-if="isAlertVisible">
		<view class="alert-body">
			<view class="alert-title">
				<view class="alert-title-text">商务合作</view>
				<image class="alert-title-img" src="../../static/错误.png" @click="closeAlert"></image>
			</view>
			<view class="alert-content">
				<view class="alert-content-textbox">
					<view class="alert-content-textbox-textbox">
						<view class="alert-content-textbox-textbox-text1">商家合作电话</view>
						<view class="alert-content-textbox-textbox-text2">135-5314-7516</view>
					</view>
					<view class="alert-content-textbox-imgbox">
						<image class="alert-content-textbox-imgbox-img" src="../../static/手机.png"></image>
					</view>
				</view>

				<view class="alert-content-textbox">
					<view class="alert-content-textbox-textbox">
						<view class="alert-content-textbox-textbox-text1">商家合作微信</view>
						<view class="alert-content-textbox-textbox-text2">135-5314-7516</view>
					</view>
					<view class="alert-content-textbox-imgbox">
						<image class="alert-content-textbox-imgbox-img" src="../../static/手机.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 上面是弹窗部分 -->
	<zdy-tabbar :current-page="4"></zdy-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				isAlertVisible: false,
			}
		},
		methods: {

			goToSet() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.navigateTo({
					url: '/pages/Setfocuspage/Setfocuspage', // 我的路径
				});
			},
			goToWithdrawal() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.navigateTo({
					url: '/pages/WithdrawalPage/WithdrawalPage', // 我的路径
				});
			},
			goToOrder() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.navigateTo({
					url: '/pages/OrderPage/OrderPage', // 我的路径
				});
			},
			goToMyteam() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.navigateTo({
					url: '/pages/MyTeamPage/MyTeamPage', // 我的路径
				});
			},
			goToIncome() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.navigateTo({
					url: '/pages/IncomePage/IncomePage', // 我的路径
				});
			},
			goToBill() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.navigateTo({
					url: '/pages/BillPage/BillPage', // 我的路径
				});
			},
			goToTool() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/LinkToolPage/LinkToolPage',
				});
			},
			showAlert() {
				this.isAlertVisible = true;
			},
			closeAlert() {
				this.isAlertVisible = false;
			},
		}
	}
</script>

<style>
	page {
		background: rgb(246, 246, 246);
	} 

	/* title部分 */
	.titlebox {
		padding: 2%;
	}

	.titlebox-messagebox {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		align-items: center;
	}

	.titlebox-messagebox-prompt {
		width: 25px;
		height: 20px;
		display: block;
		margin-left: 10px;
	}

	.titlebox-messagebox-set {
		width: 18px;
		height: 18px;
		display: block;
		margin-left: 10px;
	}


	/* Personal部分 */
	.personalbox {
		padding: 2% 4%;
		display: flex;
	}

	.personalbox-profileimg {
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.personalbox-informationbox {}

	.personalbox-informationbox-nametext {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.personalbox-informationbox-idtext {
		font-size: 13px;
		color: #c7c7c7;
	}

	/* income部分 */
	.incomebox {
		padding: 2%;
		position: relative;
		
/* 		background-image: url('../../static/我的背景.png');
		background-repeat: no-repeat; 
		background-size: cover; 
		background-position: center; */
	}

	.incomebox-bg {
		width: 100%;
		height: 20vh;
		border-radius: 10px;
	}

	.incomebox-firstbox {
		display: flex;
		position: absolute;
		top: 20%;
		left: 8%;
		align-items: center;
		width: 85%;
	}

	.incomebox-firstbox-leftmoneybox {
		flex: 1;
	}

	.incomebox-firstbox-leftmoneybox-test {
		font-size: 12px;
		color: rgb(142, 142, 142);

	}

	.incomebox-firstbox-leftmoneybox-digittest {
		font-size: 20px;
		color: rgb(245, 224, 217);
	}

	.incomebox-firstbox-rightbox {
		border-radius: 35px;
		width: 70px;
		background: wheat;
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.incomebox-firstbox-rightbox-text {
		font-size: 14px;
	}

	.incomebox-secondbox {
		display: flex;
		flex-wrap: wrap;
		gap: 2%;
		position: absolute;
		width: 100%;
		left: 8%;
		top: 60%
	}

	.incomebox-secondbox-textbox {
		width: 20%;
		/* position: absolute; */
		/* top: 105px; */
		left: 30px;
	}

	.incomebox-secondbox-textbox-digittest {
		font-size: 13px;
		color: rgb(245, 224, 217);
	}


	/* tool部分样式 */
	.toolbox {
		padding: 2%;
		background: white;
		width: 92%;
		margin: 0 auto 3%;
		border-radius: 10px;
	}

	.toolbox-text {
		padding: 3% 2%;
		font-size: 15px;
	}

	.toolbox-centerbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.toolbox-contentbox {
		width: 23%;
		text-align: center;
	}

	.toolbox-contentbox-label {
		width: 20px;
		height: 20px;
		display: block;
		margin: 0 auto;
	}

	.toolbox-contentbox-text {
		font-size: 10px;
	}

	/* 遮罩层 */
	.alert {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
	}

	.alert-body {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		width: 80%;
	}

	.alert-title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}

	.alert-title-text {
		margin: 0 auto;
	}

	.alert-title-img {
		width: 20px;
		height: 20px;
		display: block;
	}

	.alert-content {
		padding: 2%;
	}

	.alert-content-textbox {
		border-radius: 10px;
		display: flex;
		align-items: center;
		padding: 2%;
		margin-bottom: 10px;
		background: #f6f6f6;
		justify-content: space-between;
	}

	.alert-content-textbox-textbox {
		padding: 2%;
	}

	.alert-content-textbox-textbox-text1 {
		font-size: 15px;
		color: #666;
	}

	.alert-content-textbox-textbox-text2 {
		font-size: 15px;
	}

	.alert-content-textbox-imgbox {
		padding: 2%;
		border-radius: 50px;
		border: 1px solid #c7c7c7;
		margin-right: 15px;
	}

	.alert-content-textbox-imgbox-img {
		display: block;
		width: 20px;
		height: 20px;
	}
</style>
